<!--  -->
<template>
  <!--mircoApp/ai-create/VoiceClon/index.wxml-->
  <div>
    <c-title text="创建声音克隆"></c-title>
    <div class="headTop flex-column">
      <div class="himg" v-if="activeRecordeStauts == 3 || (path_cv && audio_type === 1)">
        <img :src="`${imgPath}ai-create/ai-create-09.png`" alt="" mode="widthFix" />
        <div class="block-center t-c"><i class="f-40 iconfont icon-play"></i></div>
      </div>
      <div class="himg" v-else>
        <img :src="`${imgPath}ai-create/ai-create-08.png`" alt="" mode="widthFix" />
      </div>
      <van-button :class=" activeRecordeStauts == 3 || (path_cv && audio_type === 1) ? 'active-btn' : ''" @click="RecorderMag" round type="info" color="var(--themeBaseColor)" style="width: 9rem;">
        {{ activeRecordeStauts == 3 || (path_cv && audio_type === 1) ? "重新上传" : "开始录制" }}
      </van-button>
    </div>

    <div style="margin-top: -100rpx;">
      <van-cell-group inset style="padding: 0 0.8rem" class="sex-radio">
        <van-field v-model="voice_name" label="声音名称" placeholder="请输入声身名称" />
        <van-field label="声音性别">
          <div slot="input">
            <van-radio-group v-model="sex"  direction="horizontal">
              <van-radio name="2" checked-color="var(--themeBaseColor)">女声</van-radio>
              <van-radio name="1" checked-color="var(--themeBaseColor)">男声</van-radio>
            </van-radio-group>
          </div>
        </van-field>
      </van-cell-group>

      <van-cell-group inset class="m-t-10 bg-fff">
        <van-cell title="文件大小" value-class="t-l f-grow-3" value="10MB以内" />
        <van-cell title="音频时长" value-class="t-l f-grow-3" value="建议为10s~ 30s的音频" />
        <van-cell title="录制环境" value-class="t-l f-grow-3">
          <div>
            <div
              >1.尽量在同一声学环境下录制,避免过于喧哗的背景音和噪音,音频非拼接而成。 2.避免远场环境下录制，建议离麦克风50cm之内,并需要保持位置、 距离稳定，防止音量大小不一致。
              不要让讲话的气流正对麦克风，防止喷麦造成的噪音。 3.尽量在自然对话状态下录制，对比刻意压低声线/呢喃获得的音色会更贴合本人。</div
            >
          </div>
        </van-cell>
        <van-cell title="音频质量" value-class="t-l f-grow-3">
          <div>
            <div
              >1.必须仅含有一个人在说话,避免多个人同时说话。 2.说话人发音及音质越清晰、 复刻质量越高。 如说话人喉音 /声音底噪严重，则复刻音频喉音和底噪将会较为严重。 3.录音时需要保持音量大小、
              语速稳定、 注意断句、 避免口腔噪音(如口水声)、 杂音、 混响等情况。 结合最终使用场景与人设加入适当演绎，避免朗读风格过于严重，并保持整体风格一致。
              4.录音时尽量保持姿态稳定，减少不必要的肢体动作，椅子的响声、 衣物的摩擦音、 鼠标键盘的敲击声都是常见的人为噪声，需要格外注意细节。 5.如口误无需终止录音，可停顿1~2 秒后，继续录制即可。
              文案中所有文字不必追求一字不落地完成，可以接受丢字、 填字，保持语句通畅即可。</div
            >
          </div>
        </van-cell>
        <van-cell
          title="录制内容"
          value-class="t-l f-grow-3"
          value="建议在录音前熟悉文案,并确定好人设及演绎风格。尽量贴近复刻内容和主题,避免说话人韵律过于平淡,否则将得到较平的复刻效果。如需要复刻情绪韵律起伏较强的音频,请尽量输入表现力强的音频。尽量不要尝试复刻小孩或者老人的音频。"
        />
      </van-cell-group>

      <div class="flex-j-sa m-t-10 padding-10">
        <van-button @click="toNextPage" plain round color="var(--themeBaseColor)" block style="width: 8rem;">取消</van-button>
        <van-button @click="subCloneAd" round color="var(--themeBaseColor)" block style="width: 8rem;">提交</van-button>
      </div>
    </div>

    <van-popup v-model="noteShow" position="bottom" round closeable @click="onClickVal" >
      <!-- left-text="上一步" bind:click-left="onClickLeft" -->
      <van-nav-bar :title="activeRecordeText" :border="false" />
      <div class="flex-column flex-j-sb" style="height: 70vh;">
        <van-transition :show="showTransition" name="slide-left">
          <div class="t-c">
            <div class="f-16 f-bold" style="margin: 1rem">{{ activeRecordeDomo ?activeRecordeDomo.text : "" }}</div>
            <div class="f-15 color-AAAAB3">{{ activeRecordeIndex + 1 }}/{{ demo_list ? demo_list.length : ""}}</div>
            <div @click="playDomo"  class="small-tag f-13 m-t-10 " :class="activeRecordeStauts != 0 ? 'disabled-bg':''">
              <i class="iconfont icon-shiting f-13"></i><div class="padding-left-6">试听</div>
            </div>
          </div>

          <div class="bg-f5f5f5  border-radius-8 margin-12 padding-10" v-if="recUrl">
            <div class="flex-j-sb flex-a-c">
                <div class="f-14 color-000000 f-bold">预览效果</div>
                <van-button color="linear-gradient(to bottom, #005BDC, #6BA8FF)" round size="small" @click.stop="InspectionREC">提交校验</van-button>
            </div>
            <div class="flex-column">
              <audio-player ref="audio" class="audio-box" :fileurl="recUrl"></audio-player>
            </div>
          </div>
        </van-transition>

        <audio ref="audioRef" controls @ended="ended" v-if="is_play" style="opacity: 0;">
          <source :src="innerAudioContext ? innerAudioContext.src : ''" type="audio/mpeg">
        </audio>

        <div style="margin-bottom: 30px;">
          <div class="flex-column flex-a-c t-c f-15" v-if="activeRecordeStauts == 0 || activeRecordeStauts == 1 " >
            <div :style="{'display': activeRecordeStauts == 1 ? 'block':'none', 'height': '25px'}">
              <img :src="`${imgPath}ai-create/ai-create-15.gif`" mode="widthFix" style="width: 150px; height: 25px;" />
            </div>
            <div class="luzhi-btn no-select" @touchstart.prevent="startRecording"  @touchend.prevent="stopHold" v-show="is_start" style="user-select: none;">按住录音</div>

            <!-- 用于测试 -->
            <div @click="handlePlay" v-show="is_show">播放录音</div>
            <div  v-show="is_show">{{innerAudioContext ? innerAudioContext.src : ""}}--{{recorder ? recorder.duration : ""}} -- {{recorder ? recorder.fileSize : ""}}</div>

            <!-- 松手发送，上移取消 -->
            <div class="color-AAAAB3" v-show="is_start">按住录音，松手发送</div>

            <div class="flex-column margin-top-10">
              <div style="display: none;">
                <van-uploader ref="readVoice" accept="audio/wav,audio/pcm" :after-read="readVoice"></van-uploader>
              </div>
              <van-button @click.stop="getVoice" block plain round type="info" color="#015EF5" style="width: 120px;height: 36px;margin: 0 auto;">上传音频文件</van-button>
              <p style="line-height: 16px;margin-top: 6px;font-size: 13px;">注：文件需为朗读该句的音频文件，支持pcm、wav格式</p>
            </div>
          </div>
          <div class="flex-j-c" style="margin-top: 0.5rem;" v-if="activeRecordeStauts == 3 && activeRecordeIndex == demo_list.length -1">
            <van-button @click="resetREC" plain round type="info" color="var(--themeBaseColor)" style="width: 8rem;margin-right: 0.5rem;">重新录制</van-button>
            <van-button @click="onClickCvVal('noteShow',false)"  round type="info" color="var(--themeBaseColor)" style="width: 8rem;">提交</van-button>
          </div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="showAgreement" closeable class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" @click-close-icon="toNextPage" :close-on-click-overlay="false">
      <div class="pop-base-title">数字人使用协议</div>
      <div class="pop-base-content t-l padding-10">
        <div v-html="body_clone_agreement"></div>
      </div>
      <div class="pop-base-bottom" @click="onClickVal('showAgreement',false)">
        <van-button round color="var(--themeBaseColor)" type="danger" block style="height: 40px;">我已知晓并同意</van-button>
      </div>
    </van-popup>

    <!-- 选择声音克隆类型 -->
    <van-popup v-model="cloneTypeShow" position="bottom" :style="{ background:' #F5F5F5'}" >
      <div class="clone-title-npx">
        <span class="clone-title">选择声音克隆类型</span>
        <van-icon name="cross" class="clone-icon" @click="cloneTypeShow = false"/>
      </div>
      <div class="clone-box-npx" @click="audio_type = 0">
        <div class="top-rat">
          <span>声音克隆</span>
          <span class="rat-sty" v-if="audio_type == 1"></span>
          <span class="rat-sty-active" v-if="audio_type === 0">
            <i class="iconfont icon-wancheng2"></i>
          </span>
        </div>
        <div class="bot-title">
          <div class="remaining">
            <span>剩余:</span>
            <span class="remaining-val">{{audio_clone_unuse}}个</span>
          </div>
          <div class="remaining-tip">克隆效果较好，需要录制20句话语音;录制要求高，失败率较高!</div>
        </div>
      </div>
      <div class="clone-box-npx"  @click="audio_type = 1">
        <div class="top-rat">
          <span>声音克隆CV版</span>
          <span class="rat-sty" v-if="audio_type === 0"></span>
          <span class="rat-sty-active" v-if="audio_type == 1">
            <i class="iconfont icon-wancheng2"></i>
          </span>
        </div>
        <div class="bot-title">
          <div class="remaining">
            <span>剩余:</span>
            <span class="remaining-val">{{audio_cv_unused}}个</span>
          </div>
          <div class="remaining-tip">克隆效果稍逊，仅需提供10~20秒的音频!</div>
        </div>
      </div>
      <div :class="audio_type !== '' ? 'next-title' : 'next-title press-clone'" @click="nextClone">下一步</div>
    </van-popup>


    <van-popup v-model="noteCvShow" position="bottom" round closeable @click="onClickVal('noteCvShow',false)" :closeable="false">
      <div class="recording-uploading">
        <span class="recording-title">录音或上传</span>
        <span class="icon-guanbi-sty" @click="noteCvShow = false">
          <i class="iconfont icon-guanbi"></i>
        </span>
      </div>
      <div class="flex-column flex-j-sb" style="height: 70vh;">
        <div class="clone-row">
          <div class="clone-remark">注：请在20秒内朗读完以下内容，或者上传20秒内的录音文件</div>
          <div class="clone-content">{{demo_cv_list.length ? demo_cv_list[demo_cv_active].content : ""}}</div>
          <div class="clone-content clone-no-Copywriting" style="text-align: center;" v-if="!demo_cv_list.length">暂无文案</div>
          <div :class="demo_cv_list.length ? 'icon-circle ': 'icon-circle clone-no-Copywriting' " @click="changeIt">
            <i class="iconfont icon-icon_circle"></i>
            <span>换一个</span> 
          </div>
        </div>
        <audio ref="audioRef" controls @ended="ended" v-if="is_play" style="opacity: 0;">
          <source :src="innerAudioContext ? innerAudioContext.src : ''" type="audio/mpeg">
        </audio>

        <div style="margin-bottom: 30px;">
          <div :style="{'display': activeRecordeStauts == 1 ? 'block':'none', 'height': '25px'}" >
            <img :src="`${imgPath}ai-create/ai-create-15.gif`" mode="widthFix" style="width: 150px; height: 25px;" />
          </div>
          <div class="flex-column flex-a-c t-c f-15" v-if="activeRecordeStauts == 0 || activeRecordeStauts == 1 " >
            <div :class="demo_cv_list.length ? 'luzhi-btn no-select' :'luzhi-btn no-select press-clone' " @touchstart.prevent="startRecording"  @touchend.prevent="stopHold" v-if="is_start" style="user-select: none;">按住录音</div>

            <!-- 用于测试 -->
            <div @click="handlePlay" v-show="is_show">播放录音</div>
            <div  v-show="is_show">{{innerAudioContext ? innerAudioContext.src : ""}}--{{recorder ? recorder.duration : ""}} -- {{recorder ? recorder.fileSize : ""}}</div>

            <!-- 松手发送，上移取消 -->
            <div class="color-AAAAB3" v-if="is_start">按住录音，松手发送</div>

          <van-uploader max-count="1" accept=".mp3,.wav,.m4a" :before-read="beforeRead" :disabled="demo_cv_list.length ? false : true"  :after-read="uploadFileCv">
            <div class="file-box">
              <span class="file-name">上传微信文件</span>
            </div>
          </van-uploader>

          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import Recorder from 'js-audio-recorder';
import AudioPlayer from './audio_player.vue';
export default {
  data() {
    return {
      imgPath: "",
      showAgreement: false,
      showTransition: true,
      noteShow: false,
      sex: null,
      voice_name: null,
      recorderManager: null,

      activeRecordeIndex: 0,
      activeRecordeDomo: null,
      activeRecordeStauts: 0,
      activeRecordeText: '请朗读',
      is_play: false,
      is_start: true,
      is_show: false, //测试音频

      cloneTypeShow: false,
      audio_type: 0,
      noteCvShow: false,
      audio_clone_unuse: "",
      audio_cv_unused: "",
      demo_cv_list: [],
      demo_cv_active: 0,
      path_cv: "",
      recUrl: null,
    };
  },

  activated() {
      this.checkRecorderScope("")
  },

  components: {AudioPlayer},

  computed: {},

  mounted() {
      this.business_id = this.$route.query.business_id || 0;
      this.getData();
      this.getAudioInterests();
      this.is_show = this.$route.query.is_show || false
  },

  methods:{
    async getData(){

      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.create.audio-clone.get-agreement",
        {
          business_id: this.$route.query.business_id || 0
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.imgPath = this.$store.state.imgPath;
      this.body_clone_agreement = data;
      this.showAgreement = true;
    },
    toNextPage(){
      // this.$router.push(this.fun.getUrl("aiCreateVideoList", {}, { business_id: this.business_id,isArrShow : 2, title: "音色管理"}));
      this.$router.go(-1);
    },
    onClickVal(name,val) {
      this[name] = val

      if(name == 'showAgreement') {
        this.checkRecorderScope(name);
      }
    },
    onClickCvVal(name,val) {
      this[name] = val
      this.cloneTypeShow = false
    },
    checkRecorderScope(name){
      Recorder.getPermission().then(() => {
          console.log('可以录音')
            if(name !== 'showAgreement') {
              this.cloneChooseEv();
            }

      }, (error) => {
        // this.$toast("请先允许该网页使用麦克风");
          this.$toast(`${error}`);
          // if(name !== 'showAgreement') {
            // this.cloneChooseEv();
          // }
      })
    },
    RecorderMag(){
      this.checkRecorderScope("");
    },
    cloneChooseEv() {
      if(!this.voice_name) {
        this.$toast("请设置声音名称");
        return;
      }
      if(!this.sex) {
        this.$toast("请选择声音性别");
        return;
      }
      this.cloneTypeShow = true;
    },
    nextClone() {
      if(this.audio_type === "") {
        return
      }
      this.activeRecordeIndex = 0
      this.activeRecordeDomo = null
      this.activeRecordeStauts = 0
      this.activeRecordeText = '请朗读'
      this.path_cv = ""
      this.is_play = false
      this.is_start = true
      this.recorder = null;
      if(this.audio_type === 0) {
        this.getAudioData();
      }else {
        this.getAudioExample();
      }
    },
    async getAudioData(){
      if(!this.voice_name) {
        this.$toast("请设置声音名称");
        return;
      }
      if(!this.sex) {
        this.$toast("请选择声音性别");
        return;
      }
      this.business_id = this.$route.query.business_id || 0;
      let { result, msg, data } = await $http.post(
          "plugin.ai-create.frontend.controllers.create.audio-clone",
          {
            sex: this.sex,
            business_id: this.business_id || 0,
            voice_name: this.voice_name
          },
        );
        if (result == 0) return this.$toast(msg);

      this.noteShow = true;
      this.activeRecordeDomo = data.demo_list[0]
      Object.assign(this, data)
      console.log(data,'data',this.demo_list);
      this.innerAudioContext = {}
      this.innerAudioContext.src = data.demo_list[0].demo_audio;
      this.is_play  = true
    },
    playDomo(){
      // if(this.activeRecordeStauts == 0) {
      this.$nextTick(() => {
        const audio = this.$refs.audioRef;
        // 调用播放方法
        audio.play();
      })
      // }
    },
    ended() {
      this.activeRecordeStauts = 0;
    },
    async startRecording(event) {
        event.preventDefault();
        document.onselectstart = new Function("event.returnValue=false");
        this.activeRecordeStauts = 0;
        if(this.recorder) {
          this.recorder.destroy().then(()=> {
              this.recorder = null;
              console.log("销毁录音实例，置为null释放资源，fn为回调函数，");
          });
        }
        setTimeout(() => {
          this.recorder = new Recorder({
            sampleBits: 16, // 采样位数，支持 8 或 16，默认是 16
            sampleRate: 48000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，Chrome 是 48000
            numChannels: 1, // 声道数，支持 1 或 2， 默认是 1,
          }),
          Recorder.getPermission().then(() => {
              this.recorder.start() // 开始录音
              setTimeout(() => {
                  this.activeRecordeStauts = 1;
              }, 100);
              console.log("开始录音");
            }, (error) => {
                  console.log(`${error.name} : ${error.message}`);
            });        
          }, 10);

    },
    stopHold() {
      this.activeRecordeStauts = 0;
      this.recorder.stop();
      console.log(this.recorder.duration,"获取录音的总时长。");  // 获取录音的总时长。
      console.log(this.recorder.fileSize,"录音文件大小（单位：字节）。"); //录音文件大小（单位：字节）。
      // this.is_start  = false;

      setTimeout(() => {
        const blob = this.recorder.getWAVBlob() // 获取 WAV 格式音频数据
        var file = new File([blob], 'audio.wav', {
          type: 'wav',
          lastModified: Date.now()
        })
        const newBlob = new Blob([file])
        const formData = new FormData()
        formData.append('file', newBlob)
        this.upVoice(formData);
        console.log(file,blob,'blobblob',this.recorder);
      }, 50);

    },
    handlePlay() {
      console.log(this.recorder,333333,this.innerAudioContext);
      this.recorder.play() // 播放录音
      if(this.recorder){
        this.recorder.downloadPCM();
        console.log(this.recorder,'recorder');
      }
    },
    onChangeSex(event) {
      this.setData({
        sex: event.detail,
      });
    },

    upVoice(formData){
      let uploadLoading = this.$toast.loading({
        message: "音频上传中",
        duration: 0
      });
      if(this.recorder) {
        this.recorder.destroy().then(()=> {
          this.recorder = null;
          console.log("销毁录音实例，置为null释放资源，fn为回调函数，");
        });
      }
      axios
        .post(this.fun.getRealUrl("upload.uploadPic&upload_type=audio"), formData,{
            headers: { "Content-Type": "multipart/form-data" }
        })
        .then(
          ({data}) => {
            console.log(data,'datadata',data.result);
            if (data.result == 1) {
                if (data.result == 1) {
                  this.path = data.data.img;
                  this.recUrl = data.data.img_url;
                  this.path_cv = data.data.img;
                  
                  if(this.audio_type === 1) {
                      this.cloneTypeShow = false;
                      this.noteCvShow = false;
                    console.log(this.cloneTypeShow,this.noteCvShow,3333);
                    this.$toast('上传成功')
                  }else {
                    // this.InspectionREC();
                  }
                } else {
                  this.is_start = true
                  this.$toast(data.msg);
                  this.activeRecordeStauts = 0;
                }
              uploadLoading.clear();

              } else {
                this.is_start = true
                this.$toast(data.msg);
                this.activeRecordeStauts = 0;
              }
            uploadLoading.clear();
          }
        )
        .catch(() => {
          this.$toast('上传失败')
          uploadLoading.clear();
          this.activeRecordeStauts = 0;
          this.is_start = true
        });
    },
    async InspectionREC(){
      let uploadLoading = this.$toast.loading({
        message: "录音校验中",
        duration: 0
      });
      this.is_start  = false;
      this.activeRecordeStauts = 2;
      // console.log('InspectionREC 参数==========',this.voice_id,this.demo_list[0])
      // console.log('InspectionREC 参数==========',this.demo_list[this.activeRecordeIndex].audio_id)
      if(!this.path) {
        this.is_start = true;
        this.activeRecordeStauts = 0;
        this.recorder.destroy().then(()=> {
          this.recorder = null;
        });
        this.$toast(`录音文件不存在,请重新录制 ${this.path}`);
        return;
      }
      console.log(
        this.voice_id,this.demo_list[this.activeRecordeIndex].audio_id,this.path,this.business_id || 0,555555555
      );
      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.create.audio-clone.read",
        {
          voice_id: this.voice_id,
          audio_id: this.demo_list[this.activeRecordeIndex].audio_id,
          path: this.path,
          business_id: this.business_id || 0
        },
        "."
      );
      uploadLoading.clear();
      this.is_start = true;
      this.activeRecordeStauts = 0;
      if(this.recorder) {
        this.recorder.destroy().then(()=> {
          this.recorder = null;
          console.log("销毁录音实例，置为null释放资源，fn为回调函数，");
        });
      }
      if(!result) {
        return this.$toast(msg);
      }
      this.innerAudioContext = null;
      this.is_play  = false;
      if(this.activeRecordeIndex ==  this.demo_list.length - 1){
        console.log('录音全部校验完成===========')
        this.activeRecordeStauts = 3;
        this.recUrl = null;
        this.innerAudioContext = null;
        return;
      }
      // this.setData({
      //   showTransition: false
      // });
      this.recUrl = null;
      this.activeRecordeIndex = this.activeRecordeIndex + 1
      this.activeRecordeDomo =  this.demo_list[this.activeRecordeIndex]
      setTimeout(() => {
        this.innerAudioContext = {}
        this.innerAudioContext.src = this.activeRecordeDomo.demo_audio;
        this.is_play  = true
      }, 500);
    },
    async subCloneAd(){
      if(this.activeRecordeStauts != 3 && this.audio_type === 0) {
        this.$toast('请先录制音频','error');
        return;
      }
      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.create.audio-clone.create",
        {
          voice_id: this.voice_id,
          name: this.voice_name,
          sex: this.sex,
          business_id: this.business_id || 0,
          audio_type: this.audio_type,
          path: this.path_cv
        },
        "."
      );
      this.$toast(msg);
      if (!result) return;
      this.toNextPage();
    },
    resetREC(){
      this.$dialog.confirm({
        title: '提示',
        message: '重新录制需从第一条进行录制，请确认是否重新录制！',
      })
        .then(() => {
          this.activeRecordeStauts = 0;
          this.activeRecordeIndex = 0;
          this.demo_list = []
          this.is_play  = false
          this.getAudioData();
        })
        .catch(() => {
          console.log('用户点击取消')
        });
    },
    // AI创作-声音克隆获取权益数量
    async getAudioInterests(){
      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.create.audio-clone.get-audio-interests",
        {
          business_id: this.business_id || 0
        },
        "."
      );
      if (!result) return;
      this.audio_clone_unuse = data.audio_clone_unuse;
      this.audio_cv_unused = data.audio_cv_unused;
      if(data.audio_clone_unuse*1 > 0) {
        this.audio_type = 0
      }else if(data.audio_cv_unused*1 > 0) {
        this.audio_type = 1
      }else {
        this.audio_type = ""
      }
    },
    // AI创作-声音克隆获取权益数量
    async getAudioExample(){
      let { result, msg, data } = await $http.post(
        "plugin.ai-create.frontend.controllers.create.audio-clone.get-audio-example",
        {},
        "."
      );
      if (!result) return;
      this.demo_cv_list = data;
      this.demo_cv_active = 0;
      this.noteCvShow = true;
    },
    // 换一个
    changeIt() {
      this.demo_cv_active = this.demo_cv_list.length -1 == this.demo_cv_active ? 0 : this.demo_cv_active + 1
    },
    // 前置校验方法
    async beforeRead (event) {
        return new Promise((resolve, reject) => {
        if (event.size > 10 * 1024 * 1024) {
          this.$toast('文件不能超过10MB');
          reject();
        } else {
          resolve();
        }
      });
    },
    uploadFileCv(file) {
      let fd = new FormData();
      fd.append("file", file.file);
      let uploadLoading = this.$toast.loading({
        message: "上传中",
        duration: 0
      });
      axios
        .post(this.fun.getRealUrl("upload.uploadPic"), fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(
          ({data}) => {
            if (data.result == 1) {
              this.path_cv = data.data.img;
              this.cloneTypeShow = false;
              this.noteCvShow = false;
            } else {
              this.$toast(data.msg)
            }
            uploadLoading.clear();
          }
        )
        .catch(() => {
          this.$toast('上传失败')
          uploadLoading.clear();
        });
    },
    getVoice(){
      this.$refs.readVoice.chooseFile();
    },
    readVoice(e) {
      let uploadForm = new FormData();
      uploadForm.append("file", e.file);
      this.upVoice(uploadForm);
    },
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.f-40 {
  color: #217BFF;
  font-size: 1.8rem;
  line-height: 2.4rem;
}
.pop-base-class .pop-base-title {
  margin: 18px 12px 12px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  text-align: left !important;
}

.pop-base-class .pop-base-content {
  min-height: 45vh;
  max-height: 60vh;
  overflow: scroll;
  padding: 0 0.6rem 3rem;
}

.pop-base-class .pop-base-bottom {
  padding: 0.5rem 0.7rem;
  background: #ffffff;
}

.color-00001C {
  color: #00001C;
}

.color-AAAAB3 {
  color: #AAAAB3;
}

.color-F15353 {
  color: #F15353;
}

.bg-fff {
  background-color: #ffffff;
}

.bg-F8F8F8 {
  background-color: #F8F8F8;
}

.img-radius {
  border-radius: 50%;
  overflow: hidden;
}

.border-radius-10 {
  border-radius: 0.5rem;
  overflow: hidden;
}

.tabs-custom-class {
  background-color: #f5f5f5;
}

.tabs-custom-class .van-tabs__line {
  bottom: 0.15rem !important;
  width: 0.5rem !important;
}

.m-t-10 {
  margin-top: 0.5rem !important;
}

.margin-10 {
  margin: 0.5rem;
}

.padding-12 {
  padding: 0.6rem;
}

.padding-top-12 {
  padding-top: 0.6rem;
}

.padding-bottom-12 {
  padding-bottom: 0.6rem;
}

.padding-left-6 {
  padding-left: 0.3rem;
}

.gird-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  text-align: center;
}

.headTop {
  padding: 1.2rem 0.6rem 3.75rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
  background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
  background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.headTop .himg {
  width: 8.75rem;
  height: 8.75rem;
  overflow: hidden;
  margin: 0 auto 0.8rem;
  position: relative;
}

.active-btn {
  border-color: #015EF5 !important;
  background: rgba(255, 255, 255, 0.5) !important;
  color: #015EF5 !important;
}
.headTop .himg img {
  width: 100%;
}
.block-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
  background: #FFFFFF;
  border-radius: 50%;
}

.luzhi-btn {
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  color: #ffffff;
  background: #015EF5;
  border-radius: 50%;
  margin: 0.6rem 0;
  font-size: 0.9rem;
}
.small-tag {
  display: inline-block;
  width: 3.25rem;
  height: 1.4rem;
  line-height: 1.4rem;
  background: #E5EEFE;
  border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  color: #015EF5;
}
.disabled-bg {
  background: #F5F5F5;
  color: #AAAAB3;
}
.sex-radio .van-cell__value .van-radio{
  display: flex
}
.no-select {
  user-select: none; /* Chrome, Opera, Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

.clone-title-npx {
  padding: 1.2rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
    .clone-title {
      font-weight: bold;
      font-size: 1rem;
      color: #00001C;
    }
    .clone-icon {
      color: #6E6E79;
    }
}

.clone-box-npx {
  background: white;
  margin: 0 0.75rem 0.6rem 0.75rem;
  padding: 0.6rem 0.65rem;
  border-radius: 0.8rem;
  .top-rat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 0.95rem;
    color: #00001C;
    .rat-sty {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      background: #F0F0F1;
      border: 0.025rem solid #AAAAB3;
      margin: 0 0.2rem;
    }
  }
  .rat-sty-active {
    .icon-wancheng2 {
      font-size: 1.3rem;
      color: #015EF5;
    }
  }
  .bot-title {
    text-align: left;
    .remaining {
      margin: 0.4rem 0 0.3rem 0;
      font-size: 0.9rem;
      color: #00001C;
      .remaining-val {
        color: #015EF5;
        margin-left: 0.3rem;
      }
    }
    .remaining-tip {
      font-size: 0.9rem;
      color: #6E6E79;
    }
  }
}

.next-title {
  font-size: 0.95rem;
  color: #FFFFFF;
  height: 2.5rem;
  background: #015EF5;
  border-radius: 1.5rem;
  line-height: 2.5rem;
  margin: 3.5rem 0.75rem 1.2rem 0.75rem;
}
.recording-uploading {
    text-align: center;
    margin: 1.2rem 0.8rem;
  .recording-title {
    font-weight: bold;
    font-size: 1.08rem;
    color: #00001C;
    margin-left: 1.8rem;
  }
  .icon-guanbi-sty {
    width: 1.8rem;
    height: 1.8rem;
    background: #F0F0F1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    .icon-guanbi {

    }
  }
}
.clone-row {
  .clone-remark {
    background: #E5EEFE;
    border-radius: 0.4rem 0.4rem 0.4rem 0.4rem;
    color: #015EF5;
    margin: 0 0.8rem 1.2rem 0.8rem;
    font-size: 0.75rem;
    text-align: left;
    padding: 0.5rem;
  }
  .clone-content {
    margin: 0 2.2rem 1.2rem 2.2rem;
    font-size: 0.9rem;
    color: #00001C;
    text-align: left;
  }
}
.icon-circle {
  font-size: 0.95rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #015EF5;
  line-height: 1;
  .icon-icon_circle {
    font-size: 1.2rem;
  }
}

.file-box {
  display: flex;
  justify-content: center;
  .file-name {
    width: 6.8rem;
    height: 2.2rem;
    line-height: 2.2rem;
    border-radius: 1.2rem;
    border: 0.1rem solid #015EF5;
    font-size: 0.85rem;
    color: #015EF5;
    margin-top: 2rem;
    font-weight: 600;
  }
}

.clone-no-Copywriting {
  color: #AAAAB3;
}
.press-clone {
  background: #AAAAB3;
  color: white;
} 
</style>
<style >
  .sex-radio .van-field__label {
    width: 4.2rem !important;
    margin-right: 0 !important;
  }
</style>